<template>
  <div class="search-item">
    <template v-if="passData.type === 'input'">
      <!-- <div class="label">{{ passData.label }}</div> -->
      <a-input v-model:value="searchForm[passData.keyName]" @keydown.enter="searchHandle" size="middle" v-bind="passData.attrs" :placeholder="passData.placeholder || passData.label" allowClear />
    </template>
    <template v-else-if="passData.type === 'select'">
      <!-- <div class="label">{{ passData.label }}</div> -->
      <a-select
        v-model:value="searchForm[passData.keyName]"
        @keydown.enter="searchHandle"
        size="middle"
        show-search
        :filter-option="filterOption"
        v-bind="passData.attrs"
        :placeholder="passData.placeholder || passData.label"
        allowClear
        :max-tag-count="2"
      >
        <a-select-option v-for="item in passData.options" :key="item[passData.optConfig.value]" :value="item[passData.optConfig.value]" :label="item[passData.optConfig.label]">{{
          item[passData.optConfig.label]
        }}</a-select-option>
      </a-select>
    </template>
    <template v-else-if="passData.type === 'dict-select'">
      <!-- <div class="label">{{ passData.label }}</div> -->
      <a-select
        v-model:value="searchForm[passData.keyName]"
        @keydown.enter="searchHandle"
        size="middle"
        show-search
        :filter-option="filterOption"
        v-bind="passData.attrs"
        :placeholder="passData.placeholder || passData.label"
        allowClear
        :max-tag-count="2"
      >
        <a-select-option v-for="item in dataDict[passData.lookupCode]" :key="item[passData.optConfig.value]" :value="item[passData.optConfig.value]" :label="item[passData.optConfig.label]">{{
          item[passData.optConfig.label]
        }}</a-select-option>
      </a-select>
    </template>
    <template v-else-if="passData.type === 'color-select'">
      <!-- <div class="label">{{ passData.label }}</div> -->
      <a-select
        v-model:value="searchForm[passData.keyName]"
        @keydown.enter="searchHandle"
        size="middle"
        show-search
        :filter-option="filterOption"
        v-bind="passData.attrs"
        :placeholder="passData.placeholder || passData.label"
        allowClear
        :max-tag-count="2"
      >
        <a-select-option v-for="item in dataDict[passData.lookupCode]" :key="item[passData.optConfig.value]" :value="item[passData.optConfig.value]" :label="item[passData.optConfig.label]">
          <span class="colorBlock" :style="{ backgroundColor: item[passData.optConfig.value] }"></span>
          {{ item[passData.optConfig.label] }}
        </a-select-option>
      </a-select>
    </template>
    <template v-else-if="passData.type === 'cascader'">
      <!-- <div class="label">{{ passData.label }}</div> -->
      <a-cascader
        v-model:value="searchForm[passData.keyName]"
        showSearch
        :fieldNames="passData.optConfig"
        :options="passData.options"
        :placeholder="passData.placeholder || passData.label"
        :max-tag-count="2"
        v-bind="passData.attrs"
      />
    </template>
    <template v-else-if="passData.type === 'datetimerange'">
      <!-- <div class="label">{{ passData.label }}</div> -->
      <a-range-picker v-model:value="searchForm[passData.keyName]" @keydown.enter="searchHandle" size="middle" :ranges="ranges" show-time format="YYYY/MM/DD HH:mm:ss" />
    </template>
    <template v-else-if="passData.type === 'daterange'">
      <!-- <div class="label">{{ passData.label }}</div> -->
      <a-range-picker v-model:value="searchForm[passData.keyName]" valueFormat="YYYY-MM-DD" @keydown.enter="searchHandle" size="middle" :ranges="ranges" format="YYYY/MM/DD" />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, onMounted } from "vue";
import { SearchForm } from ".";
import InitHook from "./composables/initHook";
import CommonHook from "@/hook/commonHook";

const props = withDefaults(
  defineProps<{
    passData: SuperSearch.SearchItem;
    searchForm: SearchForm;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "search"): void;
}>();
const { passData, searchForm } = toRefs(props);
const { ranges, init } = InitHook({ passData, searchForm });
const { dataDict } = CommonHook();
const searchHandle = () => {
  emit("search");
};
onMounted(() => {
  init();
});
const filterOption = (input: string, option: any) => {
  return String(option.label).toLowerCase().indexOf(String(input).toLowerCase()) >= 0;
};
</script>
<style lang="stylus" scoped>
.search-item{
    display: flex;
    align-items: center;
    .label{
        font-size: 12px;
        white-space: nowrap;
        line-height: 30px;
        border-right: none;
        padding-right: 8px;
        font-weight: 600;
    }
    :deep(.ant-select),:deep(.ant-picker){
        width: 100%;
    }
}
.colorBlock{
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
</style>
